<script setup lang="ts">
  import { PropType } from 'vue'
  import { useGetDetectCustomField } from '@/services/pages/return-factory/useReturnFactory'
  import { useRouter } from 'vue-router'

  const { getFieldLoading, getField } = useGetDetectCustomField()

  defineOptions({
    name: 'DetectInfoReturnFactoryDetectDetail',
  })

  const props = defineProps({
    detail: {
      type: Object as PropType<ReturnFactoryDetectDetail>,
      required: true,
    },
  })

  const router = useRouter()

  const handleRepairNoClick = () => {
    router.push({ path: `/return/factory/detail/${props.detail.repairId}` })
  }

  defineExpose({
    getCustomField: (id: string) => {
      getField(id)
    },
  })
</script>

<template>
  <div v-loading="getFieldLoading" class="detect-info-return-factory-detect-detail">
    <div class="title">检测单信息</div>
    <div class="info">
      <div class="info-item-container">
        <div class="item">
          <div class="label">
            <div class="text">返厂单号</div>
            <div class="separate">:</div>
          </div>
          <div class="value">
            <h-link @click="handleRepairNoClick">
              {{ props.detail.repairNo }}
            </h-link>
          </div>
        </div>
        <div class="item">
          <div class="label">
            <div class="text">创建时间</div>
            <div class="separate">:</div>
          </div>
          <div class="value">{{ props.detail.createTime }}</div>
        </div>
        <div class="item">
          <div class="label">
            <div class="text">检测网点</div>
            <div class="separate">:</div>
          </div>
          <div class="value">{{ props.detail.repairCheckNetwork }}</div>
        </div>
      </div>
      <div class="info-item-container">
        <div class="item">
          <div class="label">
            <div class="text">检测人员</div>
            <div class="separate">:</div>
          </div>
          <div class="value">{{ props.detail.repairCheckNetworkUsername }}</div>
        </div>
        <div class="item">
          <div class="label">
            <div class="text">检测人员手机号</div>
            <div class="separate">:</div>
          </div>
          <div class="value">{{ props.detail.repairCheckNetworkPhone }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .detect-info-return-factory-detect-detail {
    display: flex;
    flex-direction: column;
    row-gap: 6px;

    .title {
      font-size: 12px;
      font-weight: bold;
      padding-left: 6px;
      border-left: 3px solid $primaryColor;
    }

    .info {
      display: flex;
      padding: 0 9px;
      column-gap: 72px;

      .info-item-container {
        display: flex;
        flex-direction: column;
        row-gap: 4px;

        .item {
          display: flex;
          column-gap: 5px;

          .label {
            display: flex;
            white-space: nowrap;

            .text {
              text-align: right;
            }

            .separate {
              width: 3px;
            }
          }

          .value {
            white-space: nowrap;
          }
        }
      }
    }
  }
</style>
